<template>
	<div class="w1024 page">
		<div class="tabs clear">
			<p class="tab-item" :class="tabIndex==0?'selected-item':''" @click="tabIndex=0">详情</p>
			<p class="tab-item" :class="tabIndex==1?'selected-item':''" @click="tabIndex=1">跟进</p>
			<el-button size="small" class="right" style="margin-top: 14px;" type="primary" @click="$router.go(-1)">返回</el-button>
		</div>
		<div class="page-main">
			<template v-if="tabIndex==0">
				<div class="block" style="border-bottom: 1px solid #eee;">
					<p class="block-title">客户信息</p>
					<div class="clear">
						<p class="info-item"><span>客户姓名：</span>{{obj.customername}}</p>
						<p class="info-item"><span>集团名称：</span>{{obj.companyname||'-'}}</p>
						<p class="info-item"><span>客户类别：</span>{{obj.customertype==1?'A类客户':obj.customertype==2?'B类客户':obj.customertype==3?'C类客户':'-'}}</p>
						<p class="info-item"><span>所属行业：</span>{{!obj.tradename?'-':obj.tradename+(obj.tradedetail?'-'+obj.tradedetail:'')}}</p>
						<p class="info-item"><span>联系电话：</span>{{obj.linkphone}}</p>
						<p class="info-item"><span>号码归属地：</span>{{obj.phonearea||'-'}}</p>
						<p class="info-item"><span>企业规模：</span>{{obj.scale?obj.scale+'人':'-'}}</p>
						<p class="info-item"><span>公司网址：</span>{{obj.website||'-'}}</p>
						<p class="info-item"><span>QQ号：</span>{{obj.qq||'-'}}</p>
						<p class="info-item"><span>微信号：</span>{{obj.wechat||'-'}}</p>
						<p class="info-item"><span>邮箱：</span>{{obj.email||'-'}}</p>
						<p class="info-item"><span>生日：</span>{{obj.birthday||'-'}}</p>
					</div>
				</div>
				<div class="block">
					<p class="block-title">基础信息</p>
					<div class="clear" style="color: #666;">
						<p class="info-item"><span>来源：</span>{{(obj.selfbuild==1&&obj.isimport==2)?'手动创建':!obj.source?(obj.sourcedesc||'-'):obj.source==1?'抖音':obj.source==2?'快手':obj.source==3?'头条':obj.source==13?'自建库-抖音':obj.source==14?'自建库-头条':obj.source==15?'自建库-快手':'-'}}</p>
						<p class="info-item"><span>所属人：</span>{{obj.ownername||obj.channelname||'-'}}</p>
						<!--<p class="info-item"><span>所属部门：</span>{{!obj.tradename?'':obj.tradename+(tradedetail?'-'+tradedetail:'')}}</p>-->
						<p class="info-item"><span>跟进状态：</span>{{obj.followstatus==1?'未跟进':obj.followstatus==2?'跟进中':obj.followstatus==3?'已放弃':obj.followstatus==4?'已成交':obj.followstatus==5?'系统回收':'未跟进'}}</p>
						<p class="info-item"><span>最近跟进时间：</span>{{obj.latest||'-'}}</p>
						<p class="info-item"><span>创建时间：</span>{{obj.createtime||'-'}}</p>
					</div>
					<div class="flex" v-if="fileList.length">
						<p class="block-title block-sub-title" style="width: 100px;flex-shrink: 0;">附件资料：</p>
						<div class="clear" style="padding-top: 12px;">
							<div class="file-item" v-for="item in fileList">
								<div class="file-icon">
									<img class="center" v-if="['doc','docx'].indexOf(item.type.replace('\.',''))>-1" src="../../assets/images/crm/word.png" alt="" />
									<img class="center" v-else-if="['zip','rar'].indexOf(item.type.replace('\.',''))>-1" src="../../assets/images/crm/zip.png" alt="" />
									<img class="center" @click="viewImage(item.url)" style="border: 1px solid #ddd" v-else-if="['jpg','png','gif','jpeg','bmp'].indexOf(item.type.replace('\.',''))>-1" :src="item.url" alt="" />
									<img class="center" v-else src="../../assets/images/crm/file.png" alt="" />
								</div>
								
								<a :href="baseUrl+'/free/download/exportImg?url='+item.url" download class="file-name">{{item.name}}</a>
							</div>
						</div>
					</div>
					<p class="block-title block-sub-title">分配记录</p>
					<div style="margin-top: 14px;padding-bottom: 20px;">
						<p class="no-data" v-if="!distributeHistory.length">暂无记录</p>
						<div class="record-item" v-for="item in distributeHistory">
							<span class="split-line"></span>
							<span class="circle"></span>
							<div class="record-content clear">
								<span>{{item.note}}</span><span>{{item.updatetime}}</span>
							</div>
						</div>
					</div>
				</div>
			</template>
			<template v-if="tabIndex==1">
				<div class="block ">
					<p class="block-title block-sub-title">跟进记录</p>
					<div class="deal-history" style="margin-top: 14px;padding-bottom: 20px;">
						<p class="no-data" v-if="!dealHistory.length">暂无记录</p>
						<div class="record-item" v-for="item in dealHistory">
							<span class="split-line"></span>
							<span class="circle"></span>
							<div class="record-content flex flex-justify-between">
								<p>跟进人：{{item.username}}</p>
								<p>跟进方式：{{item.followway==1?'微信':'手机'}}</p>
								<p class="flex"><span style="width: 70px;flex-shrink: 0;">跟进标识：</span><span class="flex-grow">{{item.tag==1?'客户无兴趣':item.tag==2?'价格太高':item.tag==3?'服务不周到':item.tag==4?'认可价格和产品,同意加微信':item.tag==5?'有彩铃需求，不排斥加微信':item.tag==6?'有彩铃需求,一听价格就挂电话':item.tag==6?'有彩铃需求,一听价格就挂电话':item.tag==7?'对价格认可，已经确定铃音内容或者图片，今天会付款':item.tag==8?'对产品和服务认可，对价格有疑义，想要折扣，但超出折扣政策范围，又不是C类客户':item.tag==9?'客户想做企业彩铃，但只愿意接手50元范围内的价格':'-'}}</span></p>
								<p class="flex"><span style="width: 50px;flex-shrink: 0;">备注：</span><span class="flex-grow">{{item.note||'-'}}</span></p>
								<p>{{item.updatetime}}</p>
							</div>
						</div>
					</div>
				</div>
			</template>
		</div>
		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
	</div>

</template>

<script>
	import {baseUrl} from '@/utils/common'
	export default {
		name: 'MaterialDetail',
		data() {
			return {
				baseUrl,
				tabIndex: 0,
				customeruid:this.$route.params.customeruid,
				obj: {},
				distributeHistory: [],
				dealHistory:[],
				fileList:[]
			}
		},
		mounted() {
			this.queryCustomerDetail()
			this.queryDealHistory()
			this.queryDistributeHistory()
		},
		methods: {
			queryCustomerDetail(){
				this.$request.queryCustomerDetail({
					customeruid:this.customeruid
				}).then(res=>{
					if(res.code==0){
						this.obj=res.data
					}
				})
			},
			queryDistributeHistory(){
				this.$request.queryDistributeHistory({
					customeruid:this.customeruid
				}).then(res=>{
					if(res.code==0){
						this.distributeHistory=res.list||[]
					}
				})
			},
			queryDealHistory(){
				this.$request.queryDealHistory({
					customeruid:this.customeruid
				}).then(res=>{
					if(res.code==0){
						var list=res.list
						list.forEach(item=>{
							this.fileList=this.fileList.concat(item.files||[])
						})
						this.dealHistory=list||[]
					}
				})
			}
		}
	}
</script>

<style scoped="" lang="scss">
	.page {
		background: transparent;
		.tabs {
			background: #fff;
			margin-bottom: 2px;
			padding:0 26px;
			.tab-item {
				width: 40px;
				height: 60px;
				margin-right: 20px;
				line-height: 60px;
				font-size: 16px;
				color: #333;
				text-align: center;
				float: left;
				cursor: pointer;
			}
			.selected-item {
				color: #0088EA;
				border-bottom: 1px solid #0088EA;
			}
		}
		.page-main {
			padding: 0 20px;
			background: #fff;
			.block {
				padding-left: 40px;
				padding-top: 20px;
				padding-bottom: 20px;
				color: #333;
				text-align: left;
				.block-title {
					line-height: 41px;
					font-size: 16px;
					font-weight: bold;
				}
				.block-sub-title {
					color: #666;
				}
				.info-item {
					float: left;
					width: 32%;
					line-height: 39px;
					font-size: 14px;
					span {
						&:first-child {
							padding-right: 8px;
						}
					}
				}
				.file-item{
					float: left;
					margin-right: 10px;
					margin-bottom: 10px;
					max-width: 120px;
					.file-icon{
						width: 100%;
						height: 50px;
						margin: 0 auto;
						position:relative;
						img{
							max-width: 100%;
							max-height: 100%;
						}
					}
					.file-name{
						text-align: center;
						display: block;
						font-size: 12px;
						line-height: 16px;
						color: #0088EA;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 7px;
					}
				}
				.record-item {
					padding-left: 40px;
					padding-bottom: 22px;
					line-height: 19px;
					position: relative;
					color: #666;
					font-size: 14px;
					.split-line {
						width: 2px;
						position: absolute;
						bottom: 0;
						top: 0;
						left: 4px;
						background: #0088EA;
					}
					.circle {
						width: 10px;
						height: 10px;
						border: 2px solid #0088EA;
						border-radius: 50%;
						position: absolute;
						left: 0;
						top: 0;
						background: #fff;
					}
					.record-content {
						transform: translateY(-4px);
						min-height: 19px;
						span {
							width: 240px;
							float: left;
							word-break: break-all;
						}
					}
					&:last-child {
						.split-line {
							background: #C9C9C9;
						}
						&:after {
							content: '';
							width: 6px;
							height: 6px;
							border: 2px solid #C9C9C9;
							border-radius: 50%;
							position: absolute;
							bottom: -10px;
							left: 0;
						}
					}
				}
				.no-data{
					text-align: left;
					font-size: 16px;
					color: #999;
				}
				.deal-history{
					.record-content{
						p{
							text-align: left;
							&:nth-child(1),&:nth-child(2){
								width: 120px;
							}
							&:nth-child(3){
								width:220px;
							}
							&:nth-child(4){
								width:140px;
							}
							&:nth-child(5){
								width:150px;
							}
						}
					}
				}
			}
		}
	}
</style>